<template>
  <div class="q-pa-md" style="max-width: 500px">
    <div>{{ native || 'null' }}</div>
    <div>{{ name || 'null' }}</div>
    <div>{{ age || 'null' }}</div>
    <div>{{ modelAsync || 'null' }}</div>

    <t-toggle v-model="show" label="Show form" />
    <t-toggle v-model="autofocus" label="Autofocus" />
    <t-toggle v-model="dark" label="Dark" :false-value="null" />
    <t-toggle v-model="greedy" label="Greedy" />
    <t-toggle v-model="loading" label="Loading" />
    <t-toggle v-model="customInput" label="Custom Input" />
    <t-toggle v-model="titleIsDisabled" label="Disable Title QSelect" />
    <t-option-group
      class="q-mb-lg"
      inline
      v-model="autofocusEl"
      dense="dense"
      :options="autofocusEls"
    />

    <t-form
      v-if="show"
      :autofocus="autofocus"
      ref="form"
      :greedy="greedy"
      @submit.prevent.stop="onSubmit"
      @reset="onReset"
      @validation-success="onValidationSuccess"
      @validation-error="onValidationError"
      class="q-pa-md"
      :class="dark ? 'bg-grey-8' : void 0"
    >
      <div class="q-col-gutter-md">
        <custom-input
          v-if="customInput"
          filled
          v-model="customValue"
          label="Custom value *"
          lazy-rules
          :rules="[val => (val && val.length > 0) || 'Please type something']"
          hint="This custom input should be validated first on submit"
        />

        <div>
          <input v-model="native" :autofocus="autofocusEl === 0" />
        </div>

        <my-comp />

        <t-select
          ref="title"
          name="title"
          v-model="title"
          :options="titles"
          :dark="dark"
          :color="dark ? 'yellow' : 'primary'"
          filled
          :disable="titleIsDisabled"
          label="Title"
          :rules="[val => !!val]"
          :autofocus="autofocusEl === 4"
          clearable
        />

        <t-input
          ref="name"
          :dark="dark"
          filled
          v-model="name"
          label="Your name *"
          label-color="green"
          hint="Name and surname"
          lazy-rules
          :rules="[val => (val && val.length > 0) || 'Please type something']"
          :autofocus="autofocusEl === 1"
          clearable
        />

        <t-input
          ref="age"
          :dark="dark"
          filled
          type="number"
          v-model="age"
          label="Your age * (lazy)"
          lazy-rules
          :rules="[
            val => (val !== null && val !== '') || 'Please type your age',
            val => (val > 0 && val < 100) || 'Please type a real age',
          ]"
          :autofocus="autofocusEl === 2"
          clearable
        />

        <t-input
          ref="age"
          :dark="dark"
          filled
          type="number"
          v-model="age"
          label="Your age * (lazy ondemand)"
          lazy-rules="ondemand"
          :rules="[
            val => (val !== null && val !== '') || 'Please type your age',
            val => (val > 0 && val < 100) || 'Please type a real age',
          ]"
          clearable
        />

        <t-input
          v-model="modelAsync"
          :dark="dark"
          filled
          label="Only async *"
          :rules="[asyncRule]"
          clearable
        />

        <t-toggle
          :dark="dark"
          v-model="accept"
          label="I accept the license and terms"
          :autofocus="autofocusEl === 3"
        />

        <div>
          <t-btn
            label="Submit"
            type="submit"
            color="primary"
            :loading="loading"
          />
          <t-btn
            label="Reset"
            type="reset"
            color="primary"
            flat
            class="q-ml-sm"
            :loading="loading"
          />
        </div>
      </div>
    </t-form>

    <div class="q-mt-xl q-pa-sm bg-grey-2 rounded-borders">
      <t-toggle
        v-model="nativeSubmit"
        label="Use native submit (else it calls onSubmit)"
      />
    </div>

    <t-form
      class="q-pa-md"
      autocomplete="on"
      :class="dark ? 'bg-grey-8' : void 0"
      v-on="formListeners"
      action="http://localhost:4444/upload"
      method="post"
      enctype="multipart/form-data"
      target="wind1"
    >
      <div class="q-col-gutter-md">
        <div class="q-gutter-md">
          <t-badge :label="user || 'N/A'" />
          <t-badge :label="pwd || 'N/A'" />
        </div>
        <t-select
          name="title"
          v-model="title"
          :options="titles"
          :dark="dark"
          :color="dark ? 'yellow' : 'primary'"
          filled
          label="Title"
          :rules="[val => !!val]"
        />
        <t-input
          name="user"
          v-model="user"
          :dark="dark"
          :color="dark ? 'yellow' : 'primary'"
          filled
          label="Username"
          autocomplete="username"
          :rules="[val => !!val]"
        />
        <t-input
          name="password"
          v-model="pwd"
          :dark="dark"
          :color="dark ? 'yellow' : 'primary'"
          filled
          type="password"
          label="Password"
          autocomplete="current-password"
          :rules="[val => !!val]"
        />
        <div>
          <t-btn label="Submit" type="submit" color="primary" />
        </div>
      </div>
    </t-form>
  </div>
</template>

<script>
  import {
    QCard,
    QCardSection,
    QField,
    QFormChildMixin,
  } from '@teld/q-components';
  import { h } from 'vue';

  export default {
    components: {
      customInput: {
        props: ['modelValue'],
        render() {
          return h(
            QField,
            {
              modelValue: this.modelValue,
              stackLabel: true,
            },
            {
              control: () => this.modelValue || 'null',
            },
          );
        },
      },

      myComp: {
        mixins: [QFormChildMixin],

        render() {
          return h('div', {}, [
            h(
              QCard,
              {
                class: 'text-subtitle2',
                bordered: true,
                flat: true,
              },
              () => h(QCardSection, () => ['a custom component']),
            ),
          ]);
        },

        methods: {
          validate() {
            console.log('called my-comp.validate()');
            return true;
          },
        },
      },
    },
    data() {
      return {
        loading: false,
        native: null,
        name: null,
        age: null,
        modelAsync: null,

        accept: false,

        titleIsDisabled: false,

        show: true,
        autofocus: true,
        autofocusEls: [
          { value: 0, label: 'Native input' },
          { value: 1, label: 'Name' },
          { value: 2, label: 'Age' },
          { value: 3, label: 'Toggle' },
          { value: 4, label: 'Title' },
        ],
        autofocusEl: 1,

        dark: null,
        greedy: false,

        titles: ['Mr.', 'Ms.'],

        title: null,
        user: null,
        pwd: null,
        customValue: '',
        customInput: true,

        nativeSubmit: false,
      };
    },

    computed: {
      formListeners() {
        const listeners = {
          reset: this.onReset,
        };

        if (this.nativeSubmit !== true) {
          listeners.submit = this.onSubmit;
        }

        return listeners;
      },
    },

    methods: {
      async asyncRule(val) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(!!val || '* Required');
          }, 1000);
        });
      },

      onSubmit(evt) {
        this.$q.notify('submit');
        console.log('@submit');

        // evt.target.submit()
      },

      onReset() {
        this.native = null;
        this.name = null;
        this.age = null;
        this.modelAsync = null;
        this.accept = false;

        console.log('@reset');
      },

      onValidationSuccess() {
        console.log('@validation-success');
      },

      onValidationError() {
        console.log('@validation-error');
      },

      onClick() {
        this.$q.notify('click');
        console.log('cliiick');
      },
    },
  };
</script>
